<template>
  <div class="newsUpdates">
    <div class="newsTop">
      <div class="cardTitle">新闻动态</div>
      <div class="lookAll" @click="toNewsList">全部<i class="el-icon-arrow-right"></i></div>
    </div>
    <div class="newsList">
      <div
        class="newsItem"
        v-for="(item, index) in newsData"
        :key="'news' + index"
        @click="toDetail(item.objectId)"
      >
        <div class="itemTitle oneHidden">
          <!-- <div class="itemTag" :style="typeStyles[item.type]">
            {{ typeName[item.type] }}
          </div> -->
          {{ item.title }}
        </div>
        <div class="itemContent moreHidden">
          {{ item.description }}
        </div>
        <div class="itemInfo">
          <div class="itemLook">
            <img class="lookIcon" src="@/assets/look-icon.png" alt="" srcset="">{{ item.hits }}
          </div>
          <div class="itemTime">{{ formatDate(item.createTime) }}</div>
        </div>
      </div>
    </div>
    <el-empty
      v-if="!newsData.length"
      description="暂无数据"
    ></el-empty>
  </div>
</template>

<script>
import exportCss from '@/styles/export.module.scss';
export default {
  name: 'NewsUpdates',
  props: {
    newsData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      typeName: {
        dynamic: '动态',
        news: '新闻',
        tale: '故事',
      },
      typeStyles: {
        dynamic: {
          color: exportCss.labelDynamic,
          background: exportCss.labelDynamicLight,
        },
        news: {
          color: exportCss.labelNews,
          background: exportCss.labelNewsLight,
        },
        tale: {
          color: exportCss.labelTale,
          background: exportCss.labelTaleLight,
        },
      },
      // newsData: [
      //   {
      //     type: 'dynamic',
      //   },
      //   {
      //     type: 'news',
      //   },
      //   {
      //     type: 'tale',
      //   },
      // ],
    };
  },
  methods: {
    formatDate(value) {
      return value ? this.$dayjs(value).format('YYYY/MM/DD') : '';
    },
    toDetail(id) {
        const url = this.$router.resolve({
            path: '/news/detail',
            query: {
                id
            }
        }).href;
        window.open(url, '_blank');
    },
    toNewsList() {
      this.$router.push('/news')
    }
  }
};
</script>
<style lang="scss" scoped>
.newsUpdates {
  width: 326px;
  height: 332px;
  border-radius: 8px;
  background: #fff;
  padding: 16px 16px 0;
  box-sizing: border-box;
  .newsTop {
    display: flex;
    justify-content: space-between;
    height: 22px;
    align-items: center;
    .cardTitle {
      font-size: 16px;
      font-weight: 600;
      line-height: 22px;
      color: #000000;
    }
    .lookAll {
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: $text-color-secondary;
      cursor: pointer;
    }
  }
  .newsList {
    padding-top: 6px;
    box-sizing: border-box;
    .newsItem {
      padding: 12px 0;
      box-sizing: border-box;
      border-top: 1px solid #f0f0f0;
      cursor: pointer;
      &:first-child {
        border-top: none;
      }
      .itemTitle {
        width: 294px;
        font-size: 14px;
        font-weight: 600;
        line-height: 16px;
        // display: flex;
        // align-items: center;
        .itemTag {
          width: 28px;
          height: 18px;
          border-radius: 2px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 10px;
          font-weight: 500;
          margin-right: 4px;
        }
      }
      .itemContent {
        width: 100%;
        max-height: 32px;
        line-height: 16px;
        font-size: 12px;
        font-weight: 400;
        margin-top: 4px;
      }
      .itemInfo {
        display: flex;
        justify-content: space-between;
        height: 14px;
        margin-top: 4px;
        font-weight: 400;
        align-items: center;
        font-size: 12px;
        .itemLook {
          display: flex;
          align-items: center;
          color: #c6c6c6;
          .lookIcon {
            width: 14px;
            height: 14px;
            margin-right: 4px;
          }
        }
      }
    }
  }
}
</style>
